<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>网上申报第二步</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../../css/mui.min.css">
		<link rel="stylesheet" href="../../../css/app.css">
		<style>
			.mui-bar-nav~.mui-content{padding:0;margin-top:45px;background:#f5f5f5;}
	        /*头部*/
	       .online_top{width:100%;background:#fff;padding:1rem 0 .1rem 0;}
	       .online_top_cont{width:6.35rem;margin:0 auto;overflow:hidden;}
	       .online_top_cont>img{width:5.5rem;margin:0 .42rem;}
	       .title_list{width:100%;float:left;}
	       .title_list>a{display:block;width:1.2rem;text-align:center;margin-right:.5rem;font-size:.28rem;color:#999;float:left;line-height:.5rem;}
	       .title_list>a:last-child{margin:0;}
	       .title_list>.actives{color:#333;}
	       /*主内容*/
	       .online_cont{width:100%;float:left;position:absolute;top:3.3rem;left:0;height:9.7rem;overflow:auto;}
	       .online_cont>h5{width:100%;float:left;height:.80rem;line-height:.86rem;color:#999;font-size:.32rem;font-weight:normal;}
		   .online_cont>h5>img{width:.35rem;height:.35rem;float:left;margin:.23rem .1rem 0 .25rem;}
		   .online_lint{width:100%;background:#fff;padding:.3rem .6rem;float:left;}
		   .online_lint>ul{width:100%;float:left;margin:0;padding:0;}
		   .online_lint>ul>li{width:100%;float:left;overflow:hidden;line-height:.4rem;font-size:.24rem;margin-bottom:.1rem;}
		   .online_lint_second{color:#2a558a;}
		   .menu_btn{position:fixed;height:1rem;background:#fff;width:100%;position:fixed;bottom:0;left:0;}
		   .menu_btn>.mui-btn-primary{width:6rem;margin:.15rem .75rem;height:.68rem;font-size:.32rem;}		
		   .bodys_infoss{width:5.8rem;float:left;overflow:hidden;white-space:nowrap;font-size:.26rem;line-height:.4rem;}
		   .online_twos{width:100%;background:#fff;padding:.3rem .25rem .2rem .15rem;box-sizing:border-box;float:left;}
		   .online_twos>img{width:.7rem;height:.7rem;float:left;margin-right:.15rem;}
		   .online_twos>.mui-media-bodys,.online_twos>.bodys_info{width:5.5rem;float:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
		   .online_twos>.mui-media-bodys{font-size:.3rem;line-height:.32rem;margin-top:.06rem;}
		   .online_twos>.bodys_info{font-size:.2rem;line-height:.3rem;}
		   .online_twos>.bodys_info>span{float:left;}
		   .online_twos>.bodys_info>.gray{color:#94969f;margin-right:.27rem;}
		   .online_twos .mui-icon-arrowright{color:#bbbbbb;float:right;margin-top:-.7rem;}
		   .mui-table-view{position:relative;width:100%;float:left;padding:.2rem 0 1.5rem 0;}
		   .mui-table-view-cell>a:not(.mui-btn),.mui-table-view-chevron .mui-table-view-cell>a:not(.mui-btn){margin:0;padding:0;overflow:visible;}
		   .mui-table-view .mui-media-object{height:.4rem;text-align:center;max-width:.4rem;}
		   .mui-table-view .mui-media-bodys{font-size:.28rem;color:#666;margin:0;float:left;width:1.6rem;overflow:hidden;line-height:.3rem;text-align:right;}
		   .mui-table-view-chevron .mui-table-view-cell{padding:.25rem .3rem;}
		   .mui-table-view-cell .bodys_info{float:left;font-size:.28rem;color:#666;margin-left:.36rem;width:4.5rem;margin-top:-.04rem;overflow:visible;}
           .mui-table-view:after,.mui-table-view:before{height:0;}
           .mui-table-view-cell:after{left:.25rem;background-color:#e7e7e7;bottom:1px;}
           .mui-navigate-right:after, .mui-push-right:after{content:"";}
           input[placeholder], [placeholder], *[placeholder] {color:#c7c7cd;}
           .bodys_info>.form_control{width:5.05rem;float:left;box-sizing:border-box;line-height:.35rem;color:#666;font-size:.28rem;border:none;height:.35rem;background:transparent;padding:0;margin:0;}
		  .choose{width:1.9rem;float:left;}
		  .choose>b{width:.3rem;height:.3rem;float:left;margin-right:.1rem;background:url(../../../images/work/zbxz-@2x.png) no-repeat;background-size:100% 100%;margin-top:.08rem;}
	      .choose>.actb{background:url(../../../images/work/zbxzz-@2x.png) no-repeat;background-size:100% 100%;}
		</style>
	</head>

	<body>
		<div id="immersed"></div>
		<!--公共头部-->
		<div class="mui-bar mui-bar-nav" id="header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">网上申报</h1>
		</div>
		<div class="mui-content" id="content" >
		    <div class="online_top">
		    	<div class="online_top_cont">
		    		<img src="../../../images/work/line_two.png">
		    		<div class="title_list">
		    			<a>阅读须知</a>
		    			<a  class="actives">信息填报</a>
		    			<a>材料上传</a>
		    			<a>申报告知</a>
		    		</div>
		    	</div>
		    </div>
		    <div class="online_cont">
		    	<div class="online_twos" id="correctionBox" style="display: none; padding-bottom: 1px;" > <!---->
		    		<img class="online_twos_img" src="../../../images/work/sb.png">
		    		<div class="mui-media-bodys" style="color: #CF2D28">补齐补正</div>
		    		<br />
		    		<span class="bodys_infoss" id="correctionReason" >
		    		</span>
		    	</div>
		    	<div class="online_twos">
					<img class="online_twos_img" src="../../../images/work/sxmc-@2x.png">
					<div class="mui-media-bodys" id="serviceName"></div>
					<br>
					<span class="bodys_infoss">
						<span id="userName"></span>
						<span class="gray" style="margin-right:0;font-size: 0.2rem;">[申请人]</span>
						<span id="idCard1"></span>
						<span class="gray" style="margin-right:0;font-size: 0.2rem;">[身份证号]</span>
					</span>
		    	</div>
		    	<h5><img src="../../../images/work/jbtj-@2x.png">信息填报</h5>
		    	<!--填报表单-->
		    	<ul class="mui-table-view mui-table-view-chevron" >
					<li class="mui-table-view-cell mui-media">
						<a class="mui-navigate-right">
							<div class="mui-media-bodys">联系人姓名</div>
							<span class="bodys_info" >
								<input  id="lxrName" type="text" class="form_control"  placeholder="请填写联系人姓名" />
							</span>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media">
						<a class="mui-navigate-right">
							<div class="mui-media-bodys">联系人手机</div>
							<span class="bodys_info" >
								<input name="lxrPhone" id="lxrPhone" type="text" class="form_control"  placeholder="请完填写手机号" />
							</span>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media">
						<a class="mui-navigate-right">
							<div class="mui-media-bodys">邮编</div>
							<span class="bodys_info">
								<input name="postCode" id="postCode" type="number" class="form_control" placeholder="请输入邮编">
							</span>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media">
						<input type="hidden" id="isNeedSend" name="isNeedSend" value="0" />
						<a class="mui-navigate-right">
							<div class="mui-media-bodys">邮寄取件</div>
							<span class="bodys_info">
								<span class="choose"><b val='0' class="actb"></b>不需要</span>
								<span class="choose"><b val='1'></b>需要</span>
							</span>
						</a>
					</li>
					<li  class="mui-table-view-cell mui-media mui-hidden" id="address_li">
						<a class="mui-navigate-right">
							<input type="hidden" name="addressId" id="addressId"/>
							<div class="mui-media-bodys">物流</div>
							<span class="bodys_info">
								<span id="address_span"><font color="red">物流默认为到付</font></span>
								<span id="edit_address" class="mui-badge mui-badge-success">修改地址</span>
							</span>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media">
						<a class="mui-navigate-right">
							<div class="mui-media-bodys">备注</div>
							<span class="bodys_info">
								<input type="text" id="remark" name="remark" maxlength="500" class="form_control" placeholder="请输入备注信息">
							</span>
						</a>
					</li>
		    	</ul>
		    </div>
		</div>
		<div id="menu_btn" class="menu_btn">
			<a id="nextStep" type="button" class="mui-btn mui-btn-primary">下一步</a>
		</div>
		<script>
			var my_immersed = function(immersed) {
				document.getElementById("header").style.paddingTop = immersed + 'px';
				document.getElementById("header").style.height = (immersed + 44)+'px';
				//document.getElementById("content").style.paddingTop = (immersed + 44) + 'px';
			}
		</script>
		<script type="text/javascript" src="../../../js/immersed.js"></script>
		<script type="text/javascript" src="../../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../../js/common.js"></script>
		<script type="text/javascript" src="../../../js/jquery2.2.4.min.js" ></script>
		<script type="text/javascript" src="../../../js/app.js"></script>
		<script type="text/javascript" src="../../../js/vue.min.js" ></script>
		<script>
			(function(mui,$){
				mui.init();
				var userId ,serviceId,caseId,caseCorrectionOid,correctionReason;
				document.addEventListener('setp3Back',function(e){//回调监听,更新caseId;
					caseId = e.detail.caseId;
					showBaseInfo();
				})
				//是否同意取件
				mui.plusReady(function(){
					userId = getUserId();
					serviceId = plus.webview.currentWebview().serviceId;
					caseId = plus.webview.currentWebview().caseId;
					caseCorrectionOid = plus.webview.currentWebview().caseCorrectionOid;
					correctionReason = plus.webview.currentWebview().correctionReason;
					if(caseCorrectionOid){//是补齐补正
						$("#correctionReason").text(correctionReason);
						$("#correctionBox").show();
					}
					showBaseInfo();
					plus.webview.currentWebview().addEventListener('show',function(){
						showBaseInfo();
					})
					
					changePost();
					document.getElementById('menu_btn').style.top = (plus.display.resolutionHeight - 49) + "px";
					document.getElementById("nextStep").addEventListener('tap',saveRegSetp2)
				})
				//保存事项
				var saveRegSetp2 = function(){
					if(checkAll()){
						var url = "appNetCase/saveRegCaseStep2.do";
						var netCaseJSON = {
							serviceId:serviceId,
							lxrName:$("#lxrName").val(),
							lxrPhone:$("#lxrPhone").val(),
							postCode:$("#postCode").val(),
							addressId:$("#addressId").val(),
							remark:$("#remark").val()
						}
						if(caseId){
							netCaseJSON.oid = caseId;
						}
						if($("#isNeedSend").val() == 1){
							netCaseJSON.isNeedSend = $("#isNeedSend").val();
						}
						var params = jsonToParams({
							userId:userId,
							netCaseJSON:JSON.stringify(netCaseJSON)
						});
						utils.ajax(url,function(data){
							data = JSON.parse(data);
							if(data.state == 1 && data.caseOid){
								/*openNew("_www/src/work/netCase/caseRegStep3.html",'netCase/caseRegStep3',{
										serviceId:serviceId,
										caseOid:data.caseOid ,
										caseCorrectionOid : caseCorrectionOid,
										correctionReason : correctionReason
									},null,null,{hardwareAccelerated:true})*/
								
								openNewWin("_www/src/work/netCase/caseRegStep3.html", null, 'netCase/caseRegStep3',{
									serviceId:serviceId,
									caseOid:data.caseOid ,
									caseCorrectionOid : caseCorrectionOid,
									correctionReason : correctionReason
								})
								
							}else{
								mui.toast(data.msg?data.msg:"保存时出现错误,请重试")
							}
							loading = false;
						},params,{showWait:true})
					}
				}
				//验证事项
				var checkAll = function(){
					if(!$("#lxrName").val()){
						$("#lxrName").focus();
						mui.toast("请输入联系人姓名");
						return false;
					}else{
						if($("#lxrName").val().length > 50 ){
							$("#lxrName").focus();
							mui.toast("联系人姓名必须在50个字数以内");
							return false;
						}
					}
					
					if(!$("#lxrPhone").val()){
						$("#lxrPhone").focus();
						mui.toast("请输入联系人手机");
						return false;
					}
					
					if(!isMoible($("#lxrPhone").val())){
						$("#lxrPhone").focus();
						mui.toast("请输入正确的联系人手机");
						return false;
					}
					
					if($("#postCode").val() != null && $("#postCode").val() != "" && $("#postCode").val().trim() !=""){
						if(!isZipCode($("#postCode").val())){
							$("#postCode").focus();
							mui.toast("请输入正确的邮编");
							return false;
						}
					}
					
					if($("#isNeedSend").val() == 1 && ! $("#addressId").val() ){
						mui.toast("请选择收件地址");
						return false;
					}
					return true;
				}
				//获取基本信息
				var loading = false;
				var showBaseInfo = function(){
					if(loading) return;
					loading = true;
					userId = getUserId();
					var url = "appNetCase/getCaseRegStep2BaseInfo.do";
					utils.ajax(url,function(data){
						data = JSON.parse(data);
						if(data.state == 1){
							//不存在 办件id ,判断是否多次登记
							if( !caseId && data.count == 1){
								mui.confirm("您已登记过此办件是否需要重新登记",'提示',['登记','取消'],function(e){
									if(e.index == "1"){
										plus.webview.currentWebview().hide();
										loading = false;
									}else{
										//plus.webview.currentWebview().reload(true);
									}
								},'div')
							}
							var key = userId+"-"+serviceId;
							localStorage.setItem(key,JSON.stringify(data));
							var user = data.user;
							var accreditNetUser = data.accreditNetUser;
							var service = data.service;
							var netCase = data.netCase;
							$("#lxrName").val(user.lxrName);
							$("#userName").text(user.lxrName);
							$("#idCard1").text(user.lxrCardno);
							$("#lxrPhone").val(user.lxrPhone);
							$("#serviceName").text(service.serviceName);
							if(netCase){
								$("#lxrName").val(netCase.lxrName);
								$("#lxrPhone").val(netCase.lxrPhone);
								$("#isNeedSend").val(netCase.isNeedSend);
								$("#postCode").val(netCase.postCode);
								$("#addressId").val(netCase.addressId);
								$("#remark").val(netCase.remark);
								if(netCase.addressName){
									$("#address_span").text(netCase.addressName);
								}
							}else{
								if(null != accreditNetUser || undefined != accreditNetUser){
									$("#lxrName").val(accreditNetUser.lxrName);
									$("#lxrPhone").val(accreditNetUser.lxrPhone);
								}
							}
						}else{
							caseId?(
								mui.alert("无法获取办件信息",null,null,function(){
									plus.webview.currentWebview().close("zoom-fade-in",300);
								},"div")
							):(
								mui.confirm("无法获取用户个人信息",'错误',['重试','关闭'],function(e){
									if(e.index == "1"){
										plus.webview.currentWebview().hide();
										loading = false;
									}else{
										plus.webview.currentWebview().reload(true);
									}
								},'div')
							)
						}
					},jsonToParams({userId:userId,serviceId:serviceId,caseId:caseId}),{showWait:true})
				}
				
				//预加载 地址选择
				var selectAddressView; 
				var changePost = function(){
					$('.bodys_info .choose').click(function(){
						if($(this).find('b').hasClass('actb')){
							//$(this).find('b').removeClass('actb');
						}else{
							$('.bodys_info .choose>b').removeClass('actb');
							$(this).find('b').addClass('actb');
						}
						$("#isNeedSend").val($(this).find('b').attr('val'));
						if($("#isNeedSend").val() == 1){
							$("#address_li").removeClass('mui-hidden');
							selectAddressView || (
									selectAddressView = mui.preload({
									url:'_www/src/work/netCase/selectAddress.html',
									id:'netCase/selectAddress'
								})
							);
							document.getElementById("edit_address").addEventListener('tap',function(){
									selectAddressView.show('slide-in-right',300);
							})
						}else{
							$("#address_li").addClass('mui-hidden');
						}
					})
				}
				document.addEventListener('selectedAddr',function(e){
					var param = e.detail;
					$("#address_span").text(param.addressName);
					$("#addressId").val(param.addressId);
					var addrView = plus.webview.getWebviewById(param.viewId);
					addrView && addrView.hide('zoom-fade-in',300);
				})
			}(mui,jQuery))
			
			
			/**
			 * 匹配邮政编码
			 */
			 function isZipCode(str) {
				if (str == null || str == "")
					return false;
				var result = str.match(/^[0-9]{6}$/);
				if (result == null)
					return false;
				return true;
			}
		</script>
	</body>

</html>
